<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com https://v3.alapi.cn https://www.alapi.cn 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; connect-src 'self' https://v3.alapi.cn https://www.alapi.cn; frame-src https://www.alapi.cn;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <meta name="color-scheme" content="light dark">
        <link rel="stylesheet" href="css/index.css">
        <title>文本翻译</title>
        <style>
            .translate-container {
                max-width: 800px;
                margin: 0 auto;
                padding: 20px;
                background-color: #fff;
                min-height: calc(100vh - 100px);
            }
            .nav {
                background-color: #2c3e50;
                padding: 15px;
                text-align: center;
                margin-bottom: 20px;
            }
            .nav a {
                color: #fff;
                text-decoration: none;
                margin: 0 15px;
                font-size: 16px;
                padding: 8px 15px;
                border-radius: 4px;
                transition: background-color 0.3s;
                display: inline-block;
            }
            .nav a:hover, .nav a.active {
                background-color: #34495e;
            }
            .translate-header {
                text-align: center;
                margin-bottom: 30px;
                padding-bottom: 20px;
                border-bottom: 2px solid #3498db;
            }
            .translate-header h1 {
                color: #2c3e50;
                font-size: 2.5em;
                margin-bottom: 10px;
            }
            .translate-header p {
                color: #7f8c8d;
                font-size: 1.1em;
            }
            .form-container {
                background-color: #f8f9fa;
                padding: 25px;
                border-radius: 8px;
                margin-bottom: 30px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            }
            .form-group {
                margin-bottom: 20px;
            }
            .form-group label {
                display: block;
                margin-bottom: 8px;
                color: #2c3e50;
                font-weight: bold;
                font-size: 14px;
            }
            .label-with-help {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .help-btn {
                background-color: #3498db;
                color: white;
                border: none;
                border-radius: 4px;
                padding: 4px 12px;
                font-size: 12px;
                cursor: pointer;
                transition: background-color 0.3s;
            }
            .help-btn:hover {
                background-color: #2980b9;
            }
            .token-input-wrapper {
                display: flex;
                gap: 10px;
                align-items: flex-start;
            }
            .token-input-wrapper input {
                flex: 1;
            }
            .form-group input,
            .form-group textarea,
            .form-group select {
                width: 100%;
                padding: 12px;
                border: 1px solid #ddd;
                border-radius: 6px;
                font-size: 16px;
                box-sizing: border-box;
                transition: border-color 0.3s;
                font-family: inherit;
            }
            .form-group textarea {
                min-height: 120px;
                resize: vertical;
            }
            .form-group input:focus,
            .form-group textarea:focus,
            .form-group select:focus {
                outline: none;
                border-color: #3498db;
                box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
            }
            .form-row {
                display: flex;
                gap: 15px;
            }
            .form-row .form-group {
                flex: 1;
            }
            .submit-btn {
                width: 100%;
                padding: 15px;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                border: none;
                border-radius: 6px;
                font-size: 18px;
                font-weight: bold;
                cursor: pointer;
                transition: transform 0.2s, box-shadow 0.2s;
                margin-top: 10px;
            }
            .submit-btn:hover:not(:disabled) {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
            }
            .submit-btn:disabled {
                opacity: 0.6;
                cursor: not-allowed;
            }
            .result-container {
                background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
                padding: 30px;
                border-radius: 8px;
                margin-top: 20px;
                display: none;
            }
            .result-container.show {
                display: block;
            }
            .result-title {
                font-size: 1.5em;
                color: #2c3e50;
                margin-bottom: 20px;
                text-align: center;
                font-weight: bold;
            }
            .translate-result {
                background-color: white;
                padding: 25px;
                border-radius: 8px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            }
            .translate-item {
                margin-bottom: 20px;
                padding-bottom: 20px;
                border-bottom: 1px solid #eee;
            }
            .translate-item:last-child {
                border-bottom: none;
                margin-bottom: 0;
                padding-bottom: 0;
            }
            .translate-label {
                font-size: 12px;
                color: #7f8c8d;
                margin-bottom: 8px;
                text-transform: uppercase;
                font-weight: bold;
            }
            .translate-text {
                font-size: 18px;
                line-height: 1.8;
                color: #2c3e50;
                word-wrap: break-word;
            }
            .translate-text.source {
                color: #555;
            }
            .translate-text.target {
                color: #2980b9;
                font-weight: 500;
            }
            .language-info {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 15px;
                padding-top: 15px;
                border-top: 1px solid #eee;
                font-size: 14px;
                color: #7f8c8d;
            }
            .error-message {
                background-color: #fee;
                color: #c00;
                padding: 15px;
                border-radius: 6px;
                border-left: 4px solid #f00;
                margin-top: 20px;
                display: none;
            }
            .error-message.show {
                display: block;
            }
            .loading {
                text-align: center;
                padding: 20px;
                color: #666;
                display: none;
            }
            .loading.show {
                display: block;
            }
            .loading::after {
                content: '...';
                animation: dots 1.5s steps(4, end) infinite;
            }
            @keyframes dots {
                0%, 20% { content: '.'; }
                40% { content: '..'; }
                60%, 100% { content: '...'; }
            }
            .modal-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 1000;
                justify-content: center;
                align-items: center;
            }
            .modal-overlay.show {
                display: flex;
            }
            .modal-content {
                background-color: white;
                border-radius: 8px;
                width: 90%;
                max-width: 600px;
                max-height: 80vh;
                overflow: hidden;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
                display: flex;
                flex-direction: column;
            }
            .modal-header {
                padding: 20px;
                border-bottom: 1px solid #eee;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .modal-header h2 {
                margin: 0;
                color: #2c3e50;
                font-size: 1.5em;
            }
            .modal-close {
                background: none;
                border: none;
                font-size: 24px;
                color: #999;
                cursor: pointer;
                padding: 0;
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 4px;
                transition: background-color 0.3s;
            }
            .modal-close:hover {
                background-color: #f0f0f0;
                color: #333;
            }
            .modal-body {
                padding: 20px;
                overflow-y: auto;
                flex: 1;
            }
            .modal-body iframe {
                width: 100%;
                height: 500px;
                border: none;
                border-radius: 4px;
            }
            .modal-footer {
                padding: 15px 20px;
                border-top: 1px solid #eee;
                text-align: center;
                background-color: #f8f9fa;
            }
            .modal-footer a {
                color: #3498db;
                text-decoration: none;
                font-weight: bold;
            }
            .modal-footer a:hover {
                text-decoration: underline;
            }
            @media (max-width: 768px) {
                .form-row {
                    flex-direction: column;
                }
                .translate-header h1 {
                    font-size: 2em;
                }
                .nav a {
                    display: block;
                    margin: 5px 0;
                }
                .modal-content {
                    width: 95%;
                    max-height: 90vh;
                }
                .modal-body iframe {
                    height: 400px;
                }
                .token-input-wrapper {
                    flex-direction: column;
                }
                .help-btn {
                    margin-top: 8px;
                    width: 100%;
                }
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <a href="index.html">首页</a>
            <a href="about.html">关于我们</a>
            <a href="poem.html">藏头诗</a>
            <a href="translate.html" class="active">翻译</a>
            <a href="express.html">快递查询</a>
            <a href="ip.html">IP查询</a>
            <a href="workday.html">工作日查询</a>
            <a href="network.html">网络状态</a>
            <a href="vibrate.html">震动功能</a>
            <a href="battery.html">电池状态</a>
        </div>
        <div class="translate-container">
            <div class="translate-header">
                <h1>文本翻译</h1>
                <p>支持多语言翻译，自动检测语言类型</p>
            </div>

            <div class="form-container">
                <form id="translate-form">
                    <div class="form-group">
                        <label for="token" class="label-with-help">
                            <span>API Token *</span>
                            <button type="button" class="help-btn" onclick="openTokenModal()">获取 Token</button>
                        </label>
                        <div class="token-input-wrapper">
                            <input type="text" id="token" name="token" placeholder="请输入API Token" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="text">要翻译的文本 *</label>
                        <textarea id="text" name="text" placeholder="请输入要翻译的文本" required></textarea>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="from">源语言</label>
                            <select id="from" name="from">
                                <option value="auto">自动检测</option>
                                <option value="zh" selected>中文</option>
                                <option value="en">英语</option>
                                <option value="yue">粤语</option>
                                <option value="wyw">文言文</option>
                                <option value="jp">日语</option>
                                <option value="kor">韩语</option>
                                <option value="fra">法语</option>
                                <option value="spa">西班牙语</option>
                                <option value="th">泰语</option>
                                <option value="ara">阿拉伯语</option>
                                <option value="ru">俄语</option>
                                <option value="pt">葡萄牙语</option>
                                <option value="de">德语</option>
                                <option value="it">意大利语</option>
                                <option value="el">希腊语</option>
                                <option value="nl">荷兰语</option>
                                <option value="pl">波兰语</option>
                                <option value="bul">保加利亚语</option>
                                <option value="est">爱沙尼亚语</option>
                                <option value="dan">丹麦语</option>
                                <option value="fin">芬兰语</option>
                                <option value="cs">捷克语</option>
                                <option value="rom">罗马尼亚语</option>
                                <option value="slo">斯洛文尼亚语</option>
                                <option value="swe">瑞典语</option>
                                <option value="hu">匈牙利语</option>
                                <option value="cht">繁体中文</option>
                                <option value="vie">越南语</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="to">目标语言</label>
                            <select id="to" name="to">
                                <option value="zh">中文</option>
                                <option value="en" selected>英语</option>
                                <option value="yue">粤语</option>
                                <option value="wyw">文言文</option>
                                <option value="jp">日语</option>
                                <option value="kor">韩语</option>
                                <option value="fra">法语</option>
                                <option value="spa">西班牙语</option>
                                <option value="th">泰语</option>
                                <option value="ara">阿拉伯语</option>
                                <option value="ru">俄语</option>
                                <option value="pt">葡萄牙语</option>
                                <option value="de">德语</option>
                                <option value="it">意大利语</option>
                                <option value="el">希腊语</option>
                                <option value="nl">荷兰语</option>
                                <option value="pl">波兰语</option>
                                <option value="bul">保加利亚语</option>
                                <option value="est">爱沙尼亚语</option>
                                <option value="dan">丹麦语</option>
                                <option value="fin">芬兰语</option>
                                <option value="cs">捷克语</option>
                                <option value="rom">罗马尼亚语</option>
                                <option value="slo">斯洛文尼亚语</option>
                                <option value="swe">瑞典语</option>
                                <option value="hu">匈牙利语</option>
                                <option value="cht">繁体中文</option>
                                <option value="vie">越南语</option>
                            </select>
                        </div>
                    </div>

                    <button type="submit" class="submit-btn" id="submit-btn">翻译</button>
                </form>

                <div class="loading" id="loading">正在翻译</div>
                <div class="error-message" id="error-message"></div>
            </div>

            <div class="result-container" id="result-container">
                <div class="result-title">翻译结果</div>
                <div class="translate-result">
                    <div class="translate-item">
                        <div class="translate-label">原文</div>
                        <div class="translate-text source" id="source-text"></div>
                    </div>
                    <div class="translate-item">
                        <div class="translate-label">译文</div>
                        <div class="translate-text target" id="target-text"></div>
                    </div>
                    <div class="language-info">
                        <span>源语言：<strong id="from-lang"></strong></span>
                        <span>目标语言：<strong id="to-lang"></strong></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Token 获取弹窗 -->
        <div class="modal-overlay" id="token-modal" onclick="closeTokenModal(event)">
            <div class="modal-content" onclick="event.stopPropagation()">
                <div class="modal-header">
                    <h2>获取 API Token</h2>
                    <button class="modal-close" onclick="closeTokenModal()">&times;</button>
                </div>
                <div class="modal-body">
                    <p style="margin-bottom: 15px; color: #666;">
                        请在下方页面注册并获取您的 API Token，然后将 Token 复制到输入框中。
                    </p>
                    <iframe src="https://www.alapi.cn/aff/nutpi" id="token-iframe"></iframe>
                </div>
                <div class="modal-footer">
                    <p style="margin: 0; color: #666;">
                        如果页面无法加载，请
                        <a href="https://www.alapi.cn/aff/nutpi" target="_blank">点击这里在新窗口打开</a>
                    </p>
                </div>
            </div>
        </div>

        <script src="cordova.js"></script>
        <script src="js/translate.js"></script>
        <script>
            // 打开 Token 获取弹窗
            function openTokenModal() {
                document.getElementById('token-modal').classList.add('show');
                document.body.style.overflow = 'hidden';
            }

            // 关闭 Token 获取弹窗
            function closeTokenModal(event) {
                if (event && event.target !== event.currentTarget) {
                    return;
                }
                document.getElementById('token-modal').classList.remove('show');
                document.body.style.overflow = '';
            }

            // ESC 键关闭弹窗
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    const modal = document.getElementById('token-modal');
                    if (modal.classList.contains('show')) {
                        closeTokenModal();
                    }
                }
            });
        </script>
    </body>
</html>

